<template>
  <div class="contaner">
    <div class="contanerTop">
      <div class="contanerTopLeft">
        <div class="ben-info">
          <div class="info-text">
            <div class="info-text-box">
              <div class="title1">大包重1#臂</div>
              <div class="num">{{ keepDecimal(mqttObj.LZ1001A) }}
              </div>
              <div class="unit">t</div>
            </div>
            <div class="info-text-box">
              <div class="title1">大包重2#臂</div>
              <div class="num">{{ keepDecimal(mqttObj.LZ1003A) }}</div>
              <div class="unit">t</div>
            </div>
            <div class="info-text-box">
              <div class="title1">大包测温</div>
              <div class="num" style="margin-left: 6px;">{{ keepDecimal(mqttObj.LZ1005A) }}
              </div>
              <div class="unit" style="font-size: 12px;">℃</div>
            </div>
          </div>
        </div>
        <div class="beng">
          <!-- <img src="../../assets/zhlIcon/b.jpg" alt=""> -->
          <!-- <div style="position: relative;width: 100px;height: 100px;"> -->
          <div class="bs">
            <img src="../../assets/zhlIcon/bs.png" alt="">
          </div>
          <div class="bx"></div>
          <div class="bars">
            <div class="barBox">
              <div class="barItem barItem1">
                <div class="item" :style="{ height: bars[0] }"></div>
              </div>
              <div class="barItem barItem2">
                <div class="item" :style="{ height: bars[1] }"></div>
              </div>
              <div class="barItem barItem3">
                <div class="item" :style="{ height: bars[2] }"></div>
              </div>
              <div class="barItem barItem4">
                <div class="item" :style="{ height: bars[3] }"></div>
              </div>
              <div class="barItem barItem5">
                <div class="item" :style="{ height: bars[4] }"></div>
              </div>
              <div class="barItem barItem6">
                <div class="item" :style="{ height: bars[5] }"></div>
              </div>
              <div class="barItem barItem7">
                <div class="item" :style="{ height: bars[6] }"></div>
              </div>
              <div class="barItem barItem8">
                <div class="item" :style="{ height: bars[7] }"></div>
              </div>
            </div>
          </div>
          <div class="line">
            <div class="lineBox">
              <div class="line1" v-if="lineForm.line1 > lineForm.line2" :style="{ height: lineForm.line1 + 'px' }">
              </div>
              <div class="line1" v-else :style="{ height: lineForm.line2 + 'px' }"></div>
            </div>

          </div>
          <div class="b1 bcenter">
            <div style="font-size: 12px;color: rgba(156, 159, 167, 1);">中间车编号</div>
            <div style="font-size: 22px;font-weight: bold;"></div>
          </div>
          <div class="b2 bcenter">
            <div style="font-size: 12px;color: rgba(156, 159, 167, 1);margin-top: 4px;">温度</div>
            <div style="font-size: 20px;font-weight: bold;">{{ keepDecimal(mqttObj.LZ1006A) }}℃</div>
          </div>
          <div class="b3 " style="width: 135px;border-radius: 4px;">
            <!-- <div style="font-size: 12px;color: rgba(156, 159, 167, 1);">重量</div>
            <div style="font-size: 22px;font-weight: bold;">{{ imgArr.weight }}t</div> -->
            <div style="display: flex;padding: 3px;">
              <div style="font-size: 14px;">1#中包重量</div>
              <div style="border: 1px solid #000;margin: 0 4px;">{{ keepDecimal(mqttObj.LZ1218A) }}</div>
              <div>t</div>
            </div>
            <div style="display: flex;padding: 3px;">
              <div style="font-size: 14px;">2#中包重量</div>
              <div style="border: 1px solid #000;margin: 0 4px;">{{ keepDecimal(mqttObj.LZ1219A) }}</div>
              <div>t</div>
            </div>


          </div>
          <!-- </div> -->
        </div>
        <div class="ben-info1">
          <div class="info1-text-box">
            <div class="title1">2#中包连续测温</div>
            <div class="num">{{ mqttObj.LZ1004A }}
            </div>
            <div class="unit" style="font-size: 12px;">℃</div>
          </div>
        </div>
        <div class="ben-info2">
          <div class="info1-text-box">
            <div class="title1">1#中包连续测温</div>
            <div class="num">
              {{ mqttObj.LZ1002A }}
            </div>
            <div class="unit" style="font-size: 12px;">℃</div>
          </div>
        </div>

      </div>
      <div class="contanerTopRight">
        <div class="contanerTopRightBox1">
          <div class="rtop1">
            <div class="rtop-title ">主机液压站</div>
            <div style="display: flex;width: 100%;">
              <div class="icon1">
                <div v-for="(item) in 4" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
                  <img class="img" style="width: 20px;height: 28px;" :style="{ filter: zhuji.colors1[item - 1] }"
                    src="../../assets/zhlIcon/p.png" alt="">
                  <span style="font-size:11px;">{{ item }}#压力泵</span>
                </div>
              </div>
              <div class="icon2">
                <div v-for="item in 2" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
                  <img :style="{ filter: zhuji.colors2[item - 1] }" class="img" style="width: 13px;height: 19px;"
                    src="../../assets/zhlIcon/p.png" alt="">
                  <span style="font-size: 9px;margin-top: 6px;">{{ item }}#循环泵</span>
                </div>
              </div>
            </div>
            <div class="rtinfo" style="font-size: 11px;">
              <!-- <div class="btn"></div> -->
              <div style="margin-left: 9px;margin-right: 26px;">液位</div>
              <div class="rnum">{{ zhuji.value }}</div>
              <div style="margin-left: 42px;">mm</div>
            </div>
          </div>
          <div class="rtop2">
            <div class="rtop-title ">出坯液压站</div>
            <div style="display: flex;">
              <div class="icon1">
                <div v-for="item in 4" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
                  <img :style="{ filter: chuji.colors1[item - 1] }" class="img" style="width: 20px;height: 28px;"
                    src="../../assets/zhlIcon/p.png" alt="">
                  <span style="font-size: 11px;">{{ item }}#压力泵</span>
                </div>
              </div>
              <div class="icon2">
                <div v-for="item in 2" style="display: flex;flex-direction: column;align-items: center;gap: 4px;">
                  <img :style="{ filter: chuji.colors2[item - 1] }" class="img" style="width: 13px;height: 19px;"
                    src="../../assets/zhlIcon/p.png" alt="">
                  <span style="font-size: 9px;margin-top: 6px;">{{ item }}#循环泵</span>
                </div>
              </div>
            </div>
            <div class="rtinfo" style="font-size: 11px;">
              <!-- <div class="btn"></div> -->
              <div style="margin-left: 9px;margin-right: 26px;">液位</div>
              <div class="rnum">{{ chuji.value }}</div>
              <div style="margin-left: 42px;">mm</div>
            </div>
          </div>
        </div>
        <div class="contanerTopRightBox2">
          <div class="rtable1">
            <span style="font-weight: bold;">结晶器</span>
            <ZTable :rtable1Arr="rtable1Arr"></ZTable>
          </div>
          <div class="cy">
            <div class="rcardTop">事故柴油机</div>
            <img src="../../assets/zhlIcon/p.png" :style="{ filter: cyj.d4 }" alt="">
            <div class="cyInfoBox">
              <div class="cyInfo">
                <div class="checkBOx" :style="{ backgroundColor: cyj.d1 }"></div>
                <div>允许事故柴油机运行</div>
              </div>
              <div class="cyInfo">
                <div class="checkBOx" :style="{ backgroundColor: cyj.d2 }"></div>
                <div>禁止事故柴油机运行</div>
              </div>
              <div class="cyInfo">
                <div class="checkBOx" :style="{ backgroundColor: cyj.d3 }"></div>
                <div>事故柴油机启动反馈</div>
              </div>
            </div>
          </div>
          <div class="rcard">
            <div class="rcardTop">二冷风机</div>
            <div class="rcardInfo">
              <div style="display: flex;align-items: center;justify-content: center;">
                <span style="font-size: 13px;">1#二冷风机</span>
                <img style="width: 53px;height: 51px;margin-left: 10px;" src="../../assets/zhlIcon/fen.png" alt="">
              </div>
              <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
                <div style="width: 59px;height: 12px;font-size: 11px;">操作方式</div>
                <div
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  {{ fen1.opration }}</div>
              </div>
              <div style="display: flex;justify-content: space-evenly;margin-top: 9px;">
                <div style="width: 59px;height: 12px;font-size: 11px;">工作状态</div>
                <div v-if="fen1.status"
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  运行</div>
                <div v-else
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(255, 87, 34, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  停机</div>
              </div>
            </div>
            <div class="rcardInfo">
              <div style="display: flex;align-items: center;justify-content: center;">
                <span style="font-size: 13px;">2#二冷风机</span>
                <img style="width: 53px;height: 51px;margin-left: 10px;" src="../../assets/zhlIcon/fen.png" alt="">
              </div>
              <div style="display: flex;justify-content: space-evenly;margin-top: 12px;">
                <div style="width: 59px;height: 12px;font-size: 11px;">操作方式</div>
                <div
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  {{ fen2.opration }}</div>
              </div>
              <div style="display: flex;justify-content: space-evenly;margin-top: 9px;">
                <div style="width: 59px;height: 12px;font-size: 11px;">工作状态</div>
                <div v-if="fen2.status"
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(92, 184, 92, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  运行</div>
                <div v-else
                  style="width: 49px;height: 16.44px;opacity: 1;border-radius: 1.34px;background: rgba(255, 87, 34, 1);font-size: 12px;text-align: center;color: #fff;cursor: pointer;">
                  停机</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="contanerCenter">
      <div class="ltabel1">
        <span style="font-weight: bold;">主炉</span>
        <ZTable tr="25px" :rtable1Arr="ltabel1Arr"></ZTable>
      </div>
      <div class="rtable2">
        <span style="font-weight: bold;">二冷流量</span>
        <ZTable :rtable1Arr="rtable1Arr2"></ZTable>
      </div>
      <div class="rcard1">
        <div class="recard1Top">
          <div class="recard1TopItem" v-for="item in recard1TopArr">
            {{ item }}
          </div>
        </div>
        <div class="rcard1BoxInfo">
          <div class="rcard1BoxInfoItem" v-for="item in rcard1BoxInfoArr">
            <div>{{ item.z }}</div>
            <div>{{ item.l }}</div>
            <div>{{ item.y }}</div>
            <div>{{ item.w }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contanerFooter">
      <div class="footerLeft">
        <div class="footer1">
          <div style="display: flex;align-items: center;" v-for="(item, index) in footer1">
            <span style="font-size: 12px;">{{ index + 1 }}#流</span>
            <div class="r flex">{{ keepDecimal(item) }}</div>
            <span style="font-size: 12px;">m/min</span>
          </div>
        </div>
        <div class="footer2">
          <div style="display: flex;align-items: center;" v-for="item in footer2">
            <span>状态</span>
            <div style="font-size: 10px;" class="r flex">{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="footer3">
        <div style="display: flex;align-items: center;">
          <div style="width: 75px;text-align: center;">钢种</div>
          <div class="r flex">{{ footer3[0] }}</div>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="width: 75px;text-align: center;">铸坏断面</div>
          <div class="r flex">{{ footer3[1] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ZTable from './common/ZTable.vue';
import { getMqtt } from '../../api/mqtt';

export default {
  components: {
    ZTable,
  },
  data() {
    return {

      lineForm: {
        line1: '',
        line2: '',
      },
      bars: [],
      rtable1Arr: [
        ['振频HZ'],
        ['振幅mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['液位%', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['塞棒行程mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水流量m3/m', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水温度℃', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['回水温差℃', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      rtable1Arr2: [
        ['足辊段m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['一段m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['二段m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['三段m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['二冷气压mpa', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['比水量', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['总流量m3/h', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      recard1TopArr: ['总管', '流量', '压力/MPa', '温度/℃'],
      rcard1BoxInfoArr: [
        {
          z: '二冷水进水',
          l: '',
          y: '0.00',
          w: '0.00'
        }, {
          z: '结晶器进水',
          l: '',
          y: '0.00',
          w: '0.00'
        },
        {
          z: '二冷水空气',
          l: '',
          y: '0.00',
          w: ''
        }, {
          z: '净环水总管',
          l: '',
          y: '0.00',
          w: '0.00'
        },
        {
          z: '独环水总管',
          l: '',
          y: '0.00',
          w: '0.00'
        }

      ],
      ltabel1Arr: [
        ['结晶器液位', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇筑时间hh:mm', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['设定拉速m/min', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['实际拉速m/min', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇铸断面', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['浇铸长度', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['铸胚温度', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
        ['操作模式', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      ],
      zhuji: {
        value: '',
        colors1: ['hue-rotate(31deg)', 'hue-rotate(31deg)', 'hue-rotate(31deg)', 'hue-rotate(31deg)'],
        colors2: ['hue-rotate(31deg)', 'hue-rotate(31deg)'],
      },
      chuji: {
        value: '',
        colors1: ['hue-rotate(31deg)', 'hue-rotate(31deg)', 'hue-rotate(31deg)', 'hue-rotate(31deg)'],
        colors2: ['hue-rotate(31deg)', 'hue-rotate(31deg)'],
      },
      mqttObj: {},
      fen1: {
        opration: '',
        status: ''
      },
      fen2: {
        opration: '',
        status: ''
      },
      cyj: {
        d1: '',
        d2: '',
        d3: '',
      },
      footer1: [],
      footer2: [],
      footer3: [],
    }

  },
  mounted() {
    this.getMqtt();
  },
  methods: {
    keepDecimal(number, decimalPlaces = 2) {
      if (typeof number !== 'number' || isNaN(number)) {
        return number;
      }
      return Number(number.toFixed(decimalPlaces));
    },
    getMqtt() {
      getMqtt().then(res => {
        this.mqttObj = res.data;
        this.getLoad();

      });
      setInterval(() => {
        getMqtt().then(res => {
          this.mqttObj = res.data;
          this.getLoad();
        });
      }, 1000);
    },
    getLoad() {
      this.getLineForm();
      this.getBars()
      this.getltabel1Arr();
      this.getrtable1Arr();
      this.getrtable1Arr2();
      this.getrcard1BoxInfoArr();
      this.getFen();
      this.getFooter();
      this.getZhuji();
      this.getChuji();
      this.getcyj();

    },
    getBars() {
      let arr = [];
      for (let i = 20; i <= 27; i++) {
        let propName = 'LZ12' + i + 'A';
        if (this.mqttObj[propName] !== undefined) {
          arr.push((this.keepDecimal(this.mqttObj[propName]) / 100) * 100 + '%');
        }
      }
      this.bars = arr



    },
    getLineForm() {
      this.lineForm.line1 = this.keepDecimal(this.mqttObj.LZ1217A);
      this.lineForm.line2 = this.keepDecimal(this.mqttObj.LZ1250A);

    },
    getrcard1BoxInfoArr() {
      this.rcard1BoxInfoArr[0].y = this.keepDecimal(this.mqttObj.LZ1168A);
      this.rcard1BoxInfoArr[0].w = this.keepDecimal(this.mqttObj.LZ1169A);

      this.rcard1BoxInfoArr[1].l = this.keepDecimal(this.mqttObj.LZ1167A);
      this.rcard1BoxInfoArr[1].y = this.keepDecimal(this.mqttObj.LZ1170A);
      this.rcard1BoxInfoArr[1].w = this.keepDecimal(this.mqttObj.LZ1171A);

      this.rcard1BoxInfoArr[2].y = this.keepDecimal(this.mqttObj.LZ1172A);

      this.rcard1BoxInfoArr[3].y = this.keepDecimal(this.mqttObj.LZ1173A);
      this.rcard1BoxInfoArr[3].w = this.keepDecimal(this.mqttObj.LZ1174A);

      this.rcard1BoxInfoArr[4].y = this.keepDecimal(this.mqttObj.LZ1175A);
      this.rcard1BoxInfoArr[4].w = this.keepDecimal(this.mqttObj.LZ1176A);


    },
    getcyj() {
      this.cyj.d1 = this.mqttObj.LZ1237A ? "#5CB85C" : "#ccc";
      this.cyj.d2 = this.mqttObj.LZ1238A ? "#ccc" : "#FF5722";
      this.cyj.d3 = this.mqttObj.LZ1239A ? "#5CB85C" : "#FF5722";
      this.cyj.d4 = this.mqttObj.LZ1239A ? "hue-rotate(-56deg)" : "hue-rotate(0deg)";


    },
    //远程就地
    getTrue1(a, b,) {
      let arr = [a, b];
      let index = 0;
      let newArr = arr.filter((item, index1) => {
        if (item) {
          index = index1;
          return item;
        }
      })[0];
      let obj = [
        '远程',
        '就地',
      ]
      return obj[index];
    },
    getFen() {
      this.fen1.opration = this.getTrue1(this.mqttObj.LZ1177A, this.mqttObj.LZ1177B);
      // this.fen1.status = this.getTrue1(this.mqttObj.LZ1178A, this.mqttObj.LZ1178B);
      this.fen1.status = !this.mqttObj.LZ1179A ? true : false;

      this.fen2.opration = this.getTrue1(this.mqttObj.LZ1180A, this.mqttObj.LZ1180B);
      this.fen2.status = !this.mqttObj.LZ1182A ? true : false;

    },

    getTrue(a, b, c, d, e) {
      let arr = [a, b, c, d, e];
      let index = 0;
      let newArr = arr.filter((item, index1) => {
        if (item) {
          index = index1;
          return item;
        }
      })[0];
      let obj = [
        '浇铸准备',
        '检修',
        '送引锭',
        '手动',
        '浇铸'
      ]
      return obj[index];
    },
    getrtable1Arr() {
      this.$set(this.rtable1Arr[0], 1, this.keepDecimal(this.mqttObj.LZ1055A));
      this.$set(this.rtable1Arr[0], 2, this.keepDecimal(this.mqttObj.LZ1056A));
      this.$set(this.rtable1Arr[0], 3, this.keepDecimal(this.mqttObj.LZ1057A));
      this.$set(this.rtable1Arr[0], 4, this.keepDecimal(this.mqttObj.LZ1058A));
      this.$set(this.rtable1Arr[0], 5, this.keepDecimal(this.mqttObj.LZ1059A));
      this.$set(this.rtable1Arr[0], 6, this.keepDecimal(this.mqttObj.LZ1060A));
      this.$set(this.rtable1Arr[0], 7, this.keepDecimal(this.mqttObj.LZ1061A));
      this.$set(this.rtable1Arr[0], 8, this.keepDecimal(this.mqttObj.LZ1062A));
      //
      this.$set(this.rtable1Arr[1], 1, this.keepDecimal(this.mqttObj.LZ1063A));
      this.$set(this.rtable1Arr[1], 2, this.keepDecimal(this.mqttObj.LZ1064A));
      this.$set(this.rtable1Arr[1], 3, this.keepDecimal(this.mqttObj.LZ1065A));
      this.$set(this.rtable1Arr[1], 4, this.keepDecimal(this.mqttObj.LZ1066A));
      this.$set(this.rtable1Arr[1], 5, this.keepDecimal(this.mqttObj.LZ1067A));
      this.$set(this.rtable1Arr[1], 6, this.keepDecimal(this.mqttObj.LZ1068A));
      this.$set(this.rtable1Arr[1], 7, this.keepDecimal(this.mqttObj.LZ1069A));
      this.$set(this.rtable1Arr[1], 8, this.keepDecimal(this.mqttObj.LZ1070A));
      //
      this.$set(this.rtable1Arr[2], 1, this.keepDecimal(this.mqttObj.LZ1071A));
      this.$set(this.rtable1Arr[2], 2, this.keepDecimal(this.mqttObj.LZ1072A));
      this.$set(this.rtable1Arr[2], 3, this.keepDecimal(this.mqttObj.LZ1073A));
      this.$set(this.rtable1Arr[2], 4, this.keepDecimal(this.mqttObj.LZ1074A));
      this.$set(this.rtable1Arr[2], 5, this.keepDecimal(this.mqttObj.LZ1075A));
      this.$set(this.rtable1Arr[2], 6, this.keepDecimal(this.mqttObj.LZ1076A));
      this.$set(this.rtable1Arr[2], 7, this.keepDecimal(this.mqttObj.LZ1077A));
      this.$set(this.rtable1Arr[2], 8, this.keepDecimal(this.mqttObj.LZ1078A));
      //
      this.$set(this.rtable1Arr[3], 1, this.keepDecimal(this.mqttObj.LZ1079A));
      this.$set(this.rtable1Arr[3], 2, this.keepDecimal(this.mqttObj.LZ1080A));
      this.$set(this.rtable1Arr[3], 3, this.keepDecimal(this.mqttObj.LZ1081A));
      this.$set(this.rtable1Arr[3], 4, this.keepDecimal(this.mqttObj.LZ1082A));
      this.$set(this.rtable1Arr[3], 5, this.keepDecimal(this.mqttObj.LZ1083A));
      this.$set(this.rtable1Arr[3], 6, this.keepDecimal(this.mqttObj.LZ1084A));
      this.$set(this.rtable1Arr[3], 7, this.keepDecimal(this.mqttObj.LZ1085A));
      this.$set(this.rtable1Arr[3], 8, this.keepDecimal(this.mqttObj.LZ1086A));
      //
      this.$set(this.rtable1Arr[4], 1, this.keepDecimal(this.mqttObj.LZ1087A));
      this.$set(this.rtable1Arr[4], 2, this.keepDecimal(this.mqttObj.LZ1088A));
      this.$set(this.rtable1Arr[4], 3, this.keepDecimal(this.mqttObj.LZ1089A));
      this.$set(this.rtable1Arr[4], 4, this.keepDecimal(this.mqttObj.LZ1090A));
      this.$set(this.rtable1Arr[4], 5, this.keepDecimal(this.mqttObj.LZ1091A));
      this.$set(this.rtable1Arr[4], 6, this.keepDecimal(this.mqttObj.LZ1092A));
      this.$set(this.rtable1Arr[4], 7, this.keepDecimal(this.mqttObj.LZ1093A));
      this.$set(this.rtable1Arr[4], 8, this.keepDecimal(this.mqttObj.LZ1094A));
      //
      this.$set(this.rtable1Arr[5], 1, this.keepDecimal(this.mqttObj.LZ1095A));
      this.$set(this.rtable1Arr[5], 2, this.keepDecimal(this.mqttObj.LZ1096A));
      this.$set(this.rtable1Arr[5], 3, this.keepDecimal(this.mqttObj.LZ1097A));
      this.$set(this.rtable1Arr[5], 4, this.keepDecimal(this.mqttObj.LZ1098A));
      this.$set(this.rtable1Arr[5], 5, this.keepDecimal(this.mqttObj.LZ1099A));
      this.$set(this.rtable1Arr[5], 6, this.keepDecimal(this.mqttObj.LZ1100A));
      this.$set(this.rtable1Arr[5], 7, this.keepDecimal(this.mqttObj.LZ1101A));
      this.$set(this.rtable1Arr[5], 8, this.keepDecimal(this.mqttObj.LZ1102A));
      //
      this.$set(this.rtable1Arr[6], 1, this.keepDecimal(this.mqttObj.LZ1103A));
      this.$set(this.rtable1Arr[6], 2, this.keepDecimal(this.mqttObj.LZ1104A));
      this.$set(this.rtable1Arr[6], 3, this.keepDecimal(this.mqttObj.LZ1105A));
      this.$set(this.rtable1Arr[6], 4, this.keepDecimal(this.mqttObj.LZ1106A));
      this.$set(this.rtable1Arr[6], 5, this.keepDecimal(this.mqttObj.LZ1107A));
      this.$set(this.rtable1Arr[6], 6, this.keepDecimal(this.mqttObj.LZ1108A));
      this.$set(this.rtable1Arr[6], 7, this.keepDecimal(this.mqttObj.LZ1109A));
      this.$set(this.rtable1Arr[6], 8, this.keepDecimal(this.mqttObj.LZ1110A));



    },
    getrtable1Arr2() {
      this.$set(this.rtable1Arr2[0], 1, this.keepDecimal(this.mqttObj.LZ1111A));
      this.$set(this.rtable1Arr2[0], 2, this.keepDecimal(this.mqttObj.LZ1112A));
      this.$set(this.rtable1Arr2[0], 3, this.keepDecimal(this.mqttObj.LZ1113A));
      this.$set(this.rtable1Arr2[0], 4, this.keepDecimal(this.mqttObj.LZ1114A));
      this.$set(this.rtable1Arr2[0], 5, this.keepDecimal(this.mqttObj.LZ1115A));
      this.$set(this.rtable1Arr2[0], 6, this.keepDecimal(this.mqttObj.LZ1116A));
      this.$set(this.rtable1Arr2[0], 7, this.keepDecimal(this.mqttObj.LZ1117A));
      this.$set(this.rtable1Arr2[0], 8, this.keepDecimal(this.mqttObj.LZ1118A));
      //
      this.$set(this.rtable1Arr2[1], 1, this.keepDecimal(this.mqttObj.LZ1119A));
      this.$set(this.rtable1Arr2[1], 2, this.keepDecimal(this.mqttObj.LZ1120A));
      this.$set(this.rtable1Arr2[1], 3, this.keepDecimal(this.mqttObj.LZ1121A));
      this.$set(this.rtable1Arr2[1], 4, this.keepDecimal(this.mqttObj.LZ1122A));
      this.$set(this.rtable1Arr2[1], 5, this.keepDecimal(this.mqttObj.LZ1123A));
      this.$set(this.rtable1Arr2[1], 6, this.keepDecimal(this.mqttObj.LZ1124A));
      this.$set(this.rtable1Arr2[1], 7, this.keepDecimal(this.mqttObj.LZ1125A));
      this.$set(this.rtable1Arr2[1], 8, this.keepDecimal(this.mqttObj.LZ1126A));
      //
      this.$set(this.rtable1Arr2[2], 1, this.keepDecimal(this.mqttObj.LZ1127A));
      this.$set(this.rtable1Arr2[2], 2, this.keepDecimal(this.mqttObj.LZ1128A));
      this.$set(this.rtable1Arr2[2], 3, this.keepDecimal(this.mqttObj.LZ1129A));
      this.$set(this.rtable1Arr2[2], 4, this.keepDecimal(this.mqttObj.LZ1130A));
      this.$set(this.rtable1Arr2[2], 5, this.keepDecimal(this.mqttObj.LZ1131A));
      this.$set(this.rtable1Arr2[2], 6, this.keepDecimal(this.mqttObj.LZ1132A));
      this.$set(this.rtable1Arr2[2], 7, this.keepDecimal(this.mqttObj.LZ1133A));
      this.$set(this.rtable1Arr2[2], 8, this.keepDecimal(this.mqttObj.LZ1134A));
      //
      this.$set(this.rtable1Arr2[3], 1, this.keepDecimal(this.mqttObj.LZ1135A));
      this.$set(this.rtable1Arr2[3], 2, this.keepDecimal(this.mqttObj.LZ1136A));
      this.$set(this.rtable1Arr2[3], 3, this.keepDecimal(this.mqttObj.LZ1137A));
      this.$set(this.rtable1Arr2[3], 4, this.keepDecimal(this.mqttObj.LZ1138A));
      this.$set(this.rtable1Arr2[3], 5, this.keepDecimal(this.mqttObj.LZ1139A));
      this.$set(this.rtable1Arr2[3], 6, this.keepDecimal(this.mqttObj.LZ1140A));
      this.$set(this.rtable1Arr2[3], 7, this.keepDecimal(this.mqttObj.LZ1141A));
      this.$set(this.rtable1Arr2[3], 8, this.keepDecimal(this.mqttObj.LZ1142A));
      //
      this.$set(this.rtable1Arr2[4], 1, this.keepDecimal(this.mqttObj.LZ1143A));
      this.$set(this.rtable1Arr2[4], 2, this.keepDecimal(this.mqttObj.LZ1144A));
      this.$set(this.rtable1Arr2[4], 3, this.keepDecimal(this.mqttObj.LZ1145A));
      this.$set(this.rtable1Arr2[4], 4, this.keepDecimal(this.mqttObj.LZ1146A));
      this.$set(this.rtable1Arr2[4], 5, this.keepDecimal(this.mqttObj.LZ1147A));
      this.$set(this.rtable1Arr2[4], 6, this.keepDecimal(this.mqttObj.LZ1148A));
      this.$set(this.rtable1Arr2[4], 7, this.keepDecimal(this.mqttObj.LZ1149A));
      this.$set(this.rtable1Arr2[4], 8, this.keepDecimal(this.mqttObj.LZ1150A));
      //
      this.$set(this.rtable1Arr2[5], 1, this.keepDecimal(this.mqttObj.LZ1151A));
      this.$set(this.rtable1Arr2[5], 2, this.keepDecimal(this.mqttObj.LZ1152A));
      this.$set(this.rtable1Arr2[5], 3, this.keepDecimal(this.mqttObj.LZ1153A));
      this.$set(this.rtable1Arr2[5], 4, this.keepDecimal(this.mqttObj.LZ1154A));
      this.$set(this.rtable1Arr2[5], 5, this.keepDecimal(this.mqttObj.LZ1155A));
      this.$set(this.rtable1Arr2[5], 6, this.keepDecimal(this.mqttObj.LZ1156A));
      this.$set(this.rtable1Arr2[5], 7, this.keepDecimal(this.mqttObj.LZ1157A));
      this.$set(this.rtable1Arr2[5], 8, this.keepDecimal(this.mqttObj.LZ1158A));
      //
      this.$set(this.rtable1Arr2[6], 1, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1111A)) + Number(this.keepDecimal(this.mqttObj.LZ1119A)) + Number(this.keepDecimal(this.mqttObj.LZ1127A)) + Number(this.keepDecimal(this.mqttObj.LZ1135A))));
      this.$set(this.rtable1Arr2[6], 2, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1112A)) + Number(this.keepDecimal(this.mqttObj.LZ1120A)) + Number(this.keepDecimal(this.mqttObj.LZ1128A)) + Number(this.keepDecimal(this.mqttObj.LZ1136A))));
      this.$set(this.rtable1Arr2[6], 3, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1113A)) + Number(this.keepDecimal(this.mqttObj.LZ1121A)) + Number(this.keepDecimal(this.mqttObj.LZ1129A)) + Number(this.keepDecimal(this.mqttObj.LZ1137A))));
      this.$set(this.rtable1Arr2[6], 4, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1114A)) + Number(this.keepDecimal(this.mqttObj.LZ1122A)) + Number(this.keepDecimal(this.mqttObj.LZ1130A)) + Number(this.keepDecimal(this.mqttObj.LZ1138A))));
      this.$set(this.rtable1Arr2[6], 5, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1115A)) + Number(this.keepDecimal(this.mqttObj.LZ1123A)) + Number(this.keepDecimal(this.mqttObj.LZ1131A)) + Number(this.keepDecimal(this.mqttObj.LZ1139A))));
      this.$set(this.rtable1Arr2[6], 6, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1116A)) + Number(this.keepDecimal(this.mqttObj.LZ1124A)) + Number(this.keepDecimal(this.mqttObj.LZ1132A)) + Number(this.keepDecimal(this.mqttObj.LZ1140A))));
      this.$set(this.rtable1Arr2[6], 7, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1117A)) + Number(this.keepDecimal(this.mqttObj.LZ1125A)) + Number(this.keepDecimal(this.mqttObj.LZ1133A)) + Number(this.keepDecimal(this.mqttObj.LZ1141A))));
      this.$set(this.rtable1Arr2[6], 8, this.keepDecimal(Number(this.keepDecimal(this.mqttObj.LZ1118A)) + Number(this.keepDecimal(this.mqttObj.LZ1126A)) + Number(this.keepDecimal(this.mqttObj.LZ1134A)) + Number(this.keepDecimal(this.mqttObj.LZ1142A))));







    },
    getltabel1Arr() {
      // this.ltabel1Arr[0][1] = this.mqttObj.LZ1007A;
      this.$set(this.ltabel1Arr[0], 1, this.keepDecimal(this.mqttObj.LZ1007A));
      this.$set(this.ltabel1Arr[0], 2, this.keepDecimal(this.mqttObj.LZ1008A));
      this.$set(this.ltabel1Arr[0], 3, this.keepDecimal(this.mqttObj.LZ1009A));
      this.$set(this.ltabel1Arr[0], 4, this.keepDecimal(this.mqttObj.LZ1010A));
      this.$set(this.ltabel1Arr[0], 5, this.keepDecimal(this.mqttObj.LZ1011A));
      this.$set(this.ltabel1Arr[0], 6, this.keepDecimal(this.mqttObj.LZ1012A));
      this.$set(this.ltabel1Arr[0], 7, this.keepDecimal(this.mqttObj.LZ1013A));
      this.$set(this.ltabel1Arr[0], 8, this.keepDecimal(this.mqttObj.LZ1014A));
      //
      this.$set(this.ltabel1Arr[1], 1, this.keepDecimal(this.mqttObj.LZ1015A));
      this.$set(this.ltabel1Arr[1], 2, this.keepDecimal(this.mqttObj.LZ1016A));
      this.$set(this.ltabel1Arr[1], 3, this.keepDecimal(this.mqttObj.LZ1017A));
      this.$set(this.ltabel1Arr[1], 4, this.keepDecimal(this.mqttObj.LZ1018A));
      this.$set(this.ltabel1Arr[1], 5, this.keepDecimal(this.mqttObj.LZ1019A));
      this.$set(this.ltabel1Arr[1], 6, this.keepDecimal(this.mqttObj.LZ1020A));
      this.$set(this.ltabel1Arr[1], 7, this.keepDecimal(this.mqttObj.LZ1021A));
      this.$set(this.ltabel1Arr[1], 8, this.keepDecimal(this.mqttObj.LZ1022A));
      //
      this.$set(this.ltabel1Arr[2], 1, this.keepDecimal(this.mqttObj.LZ1023A));
      this.$set(this.ltabel1Arr[2], 2, this.keepDecimal(this.mqttObj.LZ1024A));
      this.$set(this.ltabel1Arr[2], 3, this.keepDecimal(this.mqttObj.LZ1025A));
      this.$set(this.ltabel1Arr[2], 4, this.keepDecimal(this.mqttObj.LZ1026A));
      this.$set(this.ltabel1Arr[2], 5, this.keepDecimal(this.mqttObj.LZ1027A));
      this.$set(this.ltabel1Arr[2], 6, this.keepDecimal(this.mqttObj.LZ1028A));
      this.$set(this.ltabel1Arr[2], 7, this.keepDecimal(this.mqttObj.LZ1029A));
      this.$set(this.ltabel1Arr[2], 8, this.keepDecimal(this.mqttObj.LZ1030A));

      //
      this.$set(this.ltabel1Arr[3], 1, this.keepDecimal(this.mqttObj.LZ1031A));
      this.$set(this.ltabel1Arr[3], 2, this.keepDecimal(this.mqttObj.LZ1032A));
      this.$set(this.ltabel1Arr[3], 3, this.keepDecimal(this.mqttObj.LZ1033A));
      this.$set(this.ltabel1Arr[3], 4, this.keepDecimal(this.mqttObj.LZ1034A));
      this.$set(this.ltabel1Arr[3], 5, this.keepDecimal(this.mqttObj.LZ1035A));
      this.$set(this.ltabel1Arr[3], 6, this.keepDecimal(this.mqttObj.LZ1036A));
      this.$set(this.ltabel1Arr[3], 7, this.keepDecimal(this.mqttObj.LZ1037A));
      this.$set(this.ltabel1Arr[3], 8, this.keepDecimal(this.mqttObj.LZ1038A));
      //
      this.$set(this.ltabel1Arr[4], 1, this.keepDecimal(this.mqttObj.LZ1039A));
      this.$set(this.ltabel1Arr[4], 2, this.keepDecimal(this.mqttObj.LZ1040A));
      this.$set(this.ltabel1Arr[4], 3, this.keepDecimal(this.mqttObj.LZ1041A));
      this.$set(this.ltabel1Arr[4], 4, this.keepDecimal(this.mqttObj.LZ1042A));
      this.$set(this.ltabel1Arr[4], 5, this.keepDecimal(this.mqttObj.LZ1043A));
      this.$set(this.ltabel1Arr[4], 6, this.keepDecimal(this.mqttObj.LZ1044A));
      this.$set(this.ltabel1Arr[4], 7, this.keepDecimal(this.mqttObj.LZ1045A));
      this.$set(this.ltabel1Arr[4], 8, this.keepDecimal(this.mqttObj.LZ1046A));
      //
      this.$set(this.ltabel1Arr[5], 1, this.keepDecimal(this.mqttObj.LZ1047A));
      this.$set(this.ltabel1Arr[5], 2, this.keepDecimal(this.mqttObj.LZ1048A));
      this.$set(this.ltabel1Arr[5], 3, this.keepDecimal(this.mqttObj.LZ1049A));
      this.$set(this.ltabel1Arr[5], 4, this.keepDecimal(this.mqttObj.LZ1050A));
      this.$set(this.ltabel1Arr[5], 5, this.keepDecimal(this.mqttObj.LZ1051A));
      this.$set(this.ltabel1Arr[5], 6, this.keepDecimal(this.mqttObj.LZ1052A));
      this.$set(this.ltabel1Arr[5], 7, this.keepDecimal(this.mqttObj.LZ1053A));
      this.$set(this.ltabel1Arr[5], 8, this.keepDecimal(this.mqttObj.LZ1054A));
      //
      this.$set(this.ltabel1Arr[6], 1, this.keepDecimal(this.mqttObj.LZ1251A));
      this.$set(this.ltabel1Arr[6], 2, this.keepDecimal(this.mqttObj.LZ1252A));
      this.$set(this.ltabel1Arr[6], 3, this.keepDecimal(this.mqttObj.LZ1253A));
      this.$set(this.ltabel1Arr[6], 4, this.keepDecimal(this.mqttObj.LZ1254A));
      this.$set(this.ltabel1Arr[6], 5, this.keepDecimal(this.mqttObj.LZ1255A));
      this.$set(this.ltabel1Arr[6], 6, this.keepDecimal(this.mqttObj.LZ1256A));
      this.$set(this.ltabel1Arr[6], 7, this.keepDecimal(this.mqttObj.LZ1257A));
      this.$set(this.ltabel1Arr[6], 8, this.keepDecimal(this.mqttObj.LZ1258A));
      //
      this.$set(this.ltabel1Arr[7], 1, this.getTrue(this.mqttObj.LZ1228A, this.mqttObj.LZ1228B, this.mqttObj.LZ1228E, this.mqttObj.LZ1228D, this.mqttObj.LZ1228E));
      this.$set(this.ltabel1Arr[7], 2, this.getTrue(this.mqttObj.LZ1229A, this.mqttObj.LZ1229B, this.mqttObj.LZ1229E, this.mqttObj.LZ1229D, this.mqttObj.LZ1229E));
      this.$set(this.ltabel1Arr[7], 3, this.getTrue(this.mqttObj.LZ1230A, this.mqttObj.LZ1230B, this.mqttObj.LZ1230E, this.mqttObj.LZ1230D, this.mqttObj.LZ1230E));
      this.$set(this.ltabel1Arr[7], 4, this.getTrue(this.mqttObj.LZ1231A, this.mqttObj.LZ1231B, this.mqttObj.LZ1231E, this.mqttObj.LZ1231D, this.mqttObj.LZ1231E));
      this.$set(this.ltabel1Arr[7], 5, this.getTrue(this.mqttObj.LZ1232A, this.mqttObj.LZ1232B, this.mqttObj.LZ1232E, this.mqttObj.LZ1232D, this.mqttObj.LZ1232E));
      this.$set(this.ltabel1Arr[7], 6, this.getTrue(this.mqttObj.LZ1233A, this.mqttObj.LZ1233B, this.mqttObj.LZ1233E, this.mqttObj.LZ1233D, this.mqttObj.LZ1233E));
      this.$set(this.ltabel1Arr[7], 7, this.getTrue(this.mqttObj.LZ1234A, this.mqttObj.LZ1234B, this.mqttObj.LZ1234E, this.mqttObj.LZ1234D, this.mqttObj.LZ1234E));
      this.$set(this.ltabel1Arr[7], 8, this.getTrue(this.mqttObj.LZ1235A, this.mqttObj.LZ1235B, this.mqttObj.LZ1235E, this.mqttObj.LZ1235D, this.mqttObj.LZ1235E));

    },
    changeColor(a, b) {



      // 0原色，240红丝，-56绿色运行
      // return a ? "hue-rotate(0deg)" : b ? "hue-rotate(204deg)" : "hue-rotate(-56deg)";
      let arr = [a, b];
      let allFlag = arr.every(item => {
        return item
      })

      if (a) {
        return "hue-rotate(-56deg)"
      }
      if (b) {
        return "hue-rotate(204deg)"
      }
      if (!allFlag) {
        return "hue-rotate(0deg)"
      }


      // let index = 0;
      // let newArr = arr.filter((item, index1) => {
      //   if (item) {
      //     index = index1;
      //     return item;
      //   }
      // })[0];
      // let obj = [
      //   "hue-rotate(0deg)",
      //   "hue-rotate(204deg)",
      //   "hue-rotate(31deg)"
      // ]
      // return obj[index];

    },
    getZhuji() {
      this.zhuji.value = this.keepDecimal(this.mqttObj.LZ1196A);
      this.$set(this.zhuji, 'color', this.changeColor(this.mqttObj.LZ1183A, this.mqttObj.LZ118BA));
      this.zhuji.colors1[0] = this.changeColor(this.mqttObj.LZ1183A, this.mqttObj.LZ1183B);
      this.zhuji.colors1[1] = this.changeColor(this.mqttObj.LZ1184A, this.mqttObj.LZ1184B);
      this.zhuji.colors1[2] = this.changeColor(this.mqttObj.LZ1185A, this.mqttObj.LZ1185B);
      this.zhuji.colors1[3] = this.changeColor(this.mqttObj.LZ1186A, this.mqttObj.LZ1186B);

      this.zhuji.colors2[0] = this.changeColor(this.mqttObj.LZ1187A, this.mqttObj.LZ1187B);
      this.zhuji.colors2[1] = this.changeColor(this.mqttObj.LZ1188A, this.mqttObj.LZ1188B);

    },
    getChuji() {
      this.chuji.value = this.keepDecimal(this.mqttObj.LZ1198A);
      this.chuji.colors1[0] = this.changeColor(this.mqttObj.LZ1189A, this.mqttObj.LZ1189B);
      this.chuji.colors1[1] = this.changeColor(this.mqttObj.LZ1190A, this.mqttObj.LZ1190B);
      this.chuji.colors1[2] = this.changeColor(this.mqttObj.LZ1191A, this.mqttObj.LZ1191B);
      this.chuji.colors1[3] = this.changeColor(this.mqttObj.LZ1192A, this.mqttObj.LZ1192B);

      this.chuji.colors2[0] = this.changeColor(this.mqttObj.LZ1193A, this.mqttObj.LZ1193B);
      this.chuji.colors2[1] = this.changeColor(this.mqttObj.LZ1194A, this.mqttObj.LZ1194B);

    },

    getTrue3(a, b, c, d, e) {
      let arr = [a, b, c, d, e];
      console.log(arr);

      let index = 0;
      let newArr = arr.filter((item, index1) => {
        if (item) {
          index = index1;
          return item;
        }
      })[0];
      let obj = [
        '浇铸',
        '浇铸准备完成',
        '送引锭',
        '送引锭准备完毕',
        '停机'
      ]
      return obj[index];
    },
    getFooter() {
      let footer1 = [this.mqttObj.LZ1199A, this.mqttObj.LZ1200A, this.mqttObj.LZ1201A, this.mqttObj.LZ1202A, this.mqttObj.LZ1203A, this.mqttObj.LZ1204A, this.mqttObj.LZ1205A, this.mqttObj.LZ1206A];
      this.footer1 = footer1;
      let footer2 = [this.getTrue3(this.mqttObj.LZ1208A, this.mqttObj.LZ1208B, this.mqttObj.LZ1208C, this.mqttObj.LZ1208D, this.mqttObj.LZ1208E),
      this.getTrue3(this.mqttObj.LZ1209A, this.mqttObj.LZ1209B, this.mqttObj.LZ1209C, this.mqttObj.LZ1209D, this.mqttObj.LZ1209E),
      this.getTrue3(this.mqttObj.LZ1210A, this.mqttObj.LZ1210B, this.mqttObj.LZ1210C, this.mqttObj.LZ1210D, this.mqttObj.LZ1210E),
      this.getTrue3(this.mqttObj.LZ1211A, this.mqttObj.LZ1211B, this.mqttObj.LZ1211C, this.mqttObj.LZ1211D, this.mqttObj.LZ1211E),
      this.getTrue3(this.mqttObj.LZ1212A, this.mqttObj.LZ1212B, this.mqttObj.LZ1212C, this.mqttObj.LZ1212D, this.mqttObj.LZ1212E),
      this.getTrue3(this.mqttObj.LZ1213A, this.mqttObj.LZ1213B, this.mqttObj.LZ1213C, this.mqttObj.LZ1213D, this.mqttObj.LZ1213E),
      this.getTrue3(this.mqttObj.LZ1214A, this.mqttObj.LZ1214B, this.mqttObj.LZ1214C, this.mqttObj.LZ1214D, this.mqttObj.LZ1214E),
      this.getTrue3(this.mqttObj.LZ1215A, this.mqttObj.LZ1215B, this.mqttObj.LZ1215C, this.mqttObj.LZ1215D, this.mqttObj.LZ1215E),
      ];
      this.footer2 = footer2;
      let footer3 = [this.mqttObj.LZ1207A, this.mqttObj.LZ1216A]
      this.footer3 = footer3;
    }
  }
}
</script>

<style lang="scss" scoped>
.contaner {
  width: 100%;
  padding: 20px;

  .contanerTop {
    display: flex;

    .contanerTopLeft {
      width: 40%;
      position: relative;

      .beng {
        position: relative;
        z-index: -99;
        bottom: -91px;
        right: -45px;
        width: 100%;
        height: 80%;

        .bars {
          position: absolute;
          width: 70%;
          height: 86px;
          left: 4px;
          bottom: 10px;
          z-index: 111;

          .barBox {
            position: relative;
            width: 100%;
            height: 100%;

            .barItem {
              position: absolute;
              width: 30px;
              height: 88px;
              background-color: rgb(224, 219, 219);
              display: flex;
              align-items: end;
              bottom: -2px;
              transition: all 2s;
              border: 2px solid rgb(255, 87, 34);

              .item {
                height: 0;

                width: 100%;
                background-color: rgb(255, 87, 34);
                transition: all 2s;
                overflow: hidden;

              }
            }

            .barItem1 {
              left: 20px;
            }

            .barItem2 {
              left: 72px;
            }

            .barItem3 {
              left: 122px;
            }

            .barItem4 {
              left: 174px;
            }

            .barItem5 {
              left: 224px;
            }

            .barItem6 {
              left: 272px;
            }

            .barItem7 {
              left: 316px;
            }

            .barItem8 {
              left: 363px;
            }
          }




        }

        .bs {
          position: absolute;
          width: 233px;
          height: 195px;
          left: 126px;
          top: -29px;

          img {
            width: 100%;
            height: 100%;

          }

        }

        .bx {
          position: absolute;
          width: 90%;
          height: 162px;
          left: 0px;
          bottom: 10px;
          background-image: url('../../assets/zhlIcon/bx.png');
          background-size: contain;
          background-repeat: no-repeat;
        }

        .line {
          width: 10px;
          background-color: #eee;
          height: 180px;
          position: absolute;
          left: 232px;
          top: -30px;
          overflow: hidden;
          border-radius: 10px;

          .lineBox {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #000;

            .line1 {
              width: 100%;
              height: 0;
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              border-radius: 10px;
              background-color: rgb(255, 87, 34);
              transition: all 1s;
            }

            .line2 {
              width: 100%;
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              border-radius: 10px;
              background-color: rgb(255, 87, 34);
              transition: all 1s;


            }
          }
        }

        .b1 {
          position: absolute;
          left: 35px;
          top: 180px;
          width: 100px;
          height: 49px;
          opacity: 1;
          border-radius: 6px 6px, 6px, 6px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);

        }

        .b2 {
          position: absolute;
          left: 147.27px;
          top: 180px;
          width: 100px;
          height: 49px;
          opacity: 1;
          border-radius: 6.17px 6.17px, 6.17px, 6.17px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
        }

        .b3 {
          position: absolute;
          left: 260.14px;
          top: 180px;
          width: 100px;
          height: 49px;
          opacity: 1;
          border-radius: 6.17px 6.17px, 6.17px, 6.17px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);

        }

        .bcenter {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          border-radius: 4px;
        }
      }

      .ben-info {
        z-index: 99;
        position: absolute;
        left: -2.84px;
        top: 15.26px;
        width: 203px;
        height: 108.2px;
        opacity: 1;
        box-shadow: 0 0 4px #ccc;
        border-radius: 8px;
        padding: 7px 18px;

        .info-text {
          font-size: 13px;
          display: flex;
          flex-direction: column;
          gap: 15px;
          height: 90px;

          .info-text-box {
            display: flex;
            justify-content: space-between;

            .title1 {
              width: 86px;
              text-align: center;
            }

            .num {
              width: 47px;
              height: 20px;
              border: 1px solid #000;
              border-radius: 2px;
              display: flex;
              justify-content: center;
              align-items: end;

              .unit {}

            }
          }


        }

      }

      .ben-info1,
      .ben-info2 {
        position: absolute;
        right: 20px;
        top: 52.42px;
        width: 222.87px;
        height: 15.23px;
        opacity: 1;

        .info1-text-box {
          display: flex;
          align-items: end;
          justify-content: space-between;
          font-size: 13px;
          margin-top: -10px;

          .title {
            width: 99px;
            text-align: center;
          }

          .num {
            width: 55px;
            height: 18px;
            border: 1px solid #000;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: end;

            .unit {}

          }
        }
      }

      .ben-info2 {
        z-index: 99;
        position: absolute;
        top: 27.55px;
        opacity: 1;
      }





    }

    .contanerTopRight {
      width: 60%;

      .contanerTopRightBox1 {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;


        .rtop1 {
          flex: 1;
          height: 141.12px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
          padding: 8px 32px;

        }

        .rtop2 {
          flex: 1;
          height: 141.12px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
          padding: 8px 32px;

        }

        .rtop-title {
          margin: 0 auto;
          height: 38px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(30, 159, 255, 1);
          text-align: center;
          font-size: 14px;
          color: #fff;
          font-weight: 500;
          line-height: 38px;
        }

        .icon1 {
          flex: 3;
          height: 71.88px;
          opacity: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          justify-content: space-between;

        }

        .icon2 {
          flex: 1;
          height: 71.88px;
          opacity: 1;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          justify-content: space-between;
          margin-left: 21px;

        }

        .rtinfo {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;

          .btn {
            width: 78.11px;
            height: 16.48px;
            opacity: 1;
            border-radius: 1.34px;
            background: rgba(255, 87, 34, 1);
            font-size: 12px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
              cursor: pointer;
              background: rgb(250, 118, 77);

            }
          }

          .rnum {
            width: 42.11px;
            height: 14.78px;
            opacity: 1;
            border-radius: 1.34px;
            background: rgba(255, 255, 255, 1);
            border: 0.67px solid rgba(79, 79, 79, 1);
            font-size: 9px;
            display: flex;
            justify-content: center;
            align-items: center;

          }

        }


      }

      .contanerTopRightBox2 {
        display: flex;

        .rtable1 {
          flex: 1;
          height: 270.38px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
          padding: 6px 10px;
          margin-right: 10px;

        }

        .cy {
          width: 26.4%;
          margin-right: 10px;
          height: 270.38px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
          padding: 9px;
          text-align: center;

          .cyInfoBox {
            height: 50%;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .cyInfo {
              display: flex;
              justify-content: space-evenly;

              .checkBOx {
                width: 20px;
                height: 20px;
                border: 1px solid #000;
              }
            }
          }





          img {
            width: 80px;
            height: 80px;
            margin-top: 10px;
          }

          .rcardTop {
            margin: 0 auto;
            width: 100%;
            height: 23.52px;
            opacity: 1;
            border-radius: 6.72px;
            background: rgba(30, 159, 255, 1);
            font-size: 12px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

          }

        }

        .rcard {

          height: 272.38px;
          width: 22%;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
          padding: 9px;

          .rcardTop {
            margin: 0 auto;
            width: 100%;
            height: 23.52px;
            opacity: 1;
            border-radius: 6.72px;
            background: rgba(30, 159, 255, 1);
            font-size: 12px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

          }

          .rcardInfo {
            width: 100%;

            height: 108.4px;
            opacity: 1;
            border-radius: 6.72px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
            margin: 8px 0;
          }

        }
      }

    }
  }

  .contanerCenter {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;

    .ltabel1 {
      flex: 1;
      height: 270.32px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
      padding: 6px 10px;
    }

    .rtable2 {
      flex: 1;

      height: 270.37px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
      padding: 6px 10px;
    }

    .rcard1 {
      flex: 1;

      height: 270.37px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
      padding: 6px 17px 0 17px;

      .recard1Top {
        width: 100%;
        height: 53.09px;
        opacity: 1;
        border-radius: 6.72px;
        background: rgba(30, 159, 255, 1);
        color: #fff;
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        .recard1TopItem {
          line-height: 53.09px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

      }

      .rcard1BoxInfo {
        height: 223px;
        margin-top: 28px;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .rcard1BoxInfoItem {
          height: 19px;
          display: flex;
          justify-content: space-between;

          &:hover {
            cursor: pointer;
            background: #eee;
          }

          div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }



      }
    }

  }

  .contanerFooter {
    display: flex;
    gap: 10px;
    margin-top: 10px;

    .footerLeft {
      flex: 1;

      .footer1 {

        height: 25.54px;
        opacity: 1;
        border-radius: 6.72px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
        padding: 0 37px 0 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;

        .r {
          width: 28px;
          height: 20.16px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(240, 240, 240, 1);
          margin: 0 3px;
        }
      }

      .footer2 {
        font-size: 12px;
        height: 28.22px;
        opacity: 1;
        border-radius: 6.72px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
        padding: 0 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .r {
          width: 81.81px;
          height: 20.16px;
          opacity: 1;
          border-radius: 6.72px;
          background: rgba(240, 240, 240, 1);
          margin-left: 4px;

        }

      }
    }

    .footer3 {
      font-size: 12px;
      height: 55.11px;
      opacity: 1;
      border-radius: 6.72px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1.34px 2.69px rgba(0, 0, 0, 0.25);
      padding: 11px 33px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 4px;

      .r {
        height: 16.37px;
        opacity: 1;
        border-radius: 6.72px;
        background: rgba(240, 240, 240, 1);
        margin-left: 17px;
      }
    }

  }

}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img:hover {
  cursor: pointer;
  scale: 1.3;
  transition: all 0.3s;

}
</style>
